import React from 'react';
import { connect } from 'react-redux';
import { Button, Row, Col, Tooltip } from 'antd';
import List from './list';
import CommonListsIndex from '../../components/CommonLists/index';
import FilterTool from '../../components/FilterTool';
import Status from '../../components/Status';
import storage from '../../utils/storage.js'

function mapStateToProps(state) {
  return {
    strategy_type: state.code.strategy_type || [],
    strategy_mode: state.code.strategy_mode || []
  };
}

@connect(mapStateToProps)
class LabsIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'strategyLabsApi';
    this.listsComponent = List;
    this.queryTableParams = {};
    if (storage.onlineSourceId) {
      this.queryTableParams.strategy_id = storage.onlineSourceId
    }
    this.state = {
      applications: [],
      events: [],
      products: []
    };
  }
  componentDidMount() {
    this.getAppCodeList();
    this.getProductCodeList();
  }
  componentWillUnmount() {
    storage.onlineSourceId = ''
  }
  // 打开新窗口、页面的id
  getOpenParam = record => {
    return record.strategy_id;
  };

  // 表列定义
  getColumns = () => {
    return [
      {
        title: '试验项',
        key: 'name',
        dataIndex: 'name',
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>
                <Button type='link' onClick={() => this.props.history.push('/strategyLabs/' + record.lab_id + '/edit')}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        }
      },
      // {
      //   title: '策略数量',
      //   key: 'strategy_lists',
      //   dataIndex: 'strategy_lists',
      //   render: (text, record) => {
      //     return (
      //       <Button type='link' onClick={() => this.props.history.push('/strategyLabs/' + record.lab_id + '/edit')}>
      //         {record.strategy_list && record.strategy_list.length > 0 ? record.strategy_list.length : 0}
      //       </Button>
      //     );
      //   }
      // },
      {
        title: (
          <>
            {this.getFilterTitle('所属渠道', this.state.applications, 'app_id', this.refreshTableFilterWithAppV2.bind(this, 'app_id'), [
              'app_id',
              'app_name',
            ])}
          </>
        ),
        dataIndex: 'app_name',
        key: 'app_name',

        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },

      {
        title: (
          <>
            {this.getFilterTitle('关联产品', this.state.products, 'product_id', this.refreshTableFilterWithAppV2.bind(this, 'product_id'), [
              'product_id',
              'product_name',
            ])}
          </>
        ),
        dataIndex: 'product_name',
        key: 'product_name',

        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },

      {
        title: (
          <>
            {this.getFilterTitle('关联事件', this.state.events, 'event_id', this.refreshTableFilterWithAppV2.bind(this, 'event_id'), [
              'event_id',
              'event_name',
            ])}
          </>
        ),
        dataIndex: 'event_name',
        key: 'event_name',

        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '状态',
              [
                {
                  value: 1,
                  name: '未开始'
                },
                {
                  value: 2,
                  name: '已停止'
                },
                {
                  value: 3,
                  name: '进行中'
                }
              ],
              'status',
              this.refreshTableFilter,
              ['value', 'name']
            )}
          </>
        ),
        key: 'status',
        dataIndex: 'status',
        render: text => {
          return <Status value={text} isStrategyLab={true} />;
        },
        ellipsis: true
      },
      {
        title: '创建/修改人',
        key: 'create_user_name',
        dataIndex: 'create_user_name',
        render: (text, record) => {
          return (
            <Tooltip title={`${record.create_user_name}/${record.update_user_name}`} placement='topLeft'>
              <div className='overflowtext'>{`${record.create_user_name}/${record.update_user_name}`}</div>
            </Tooltip>
          );
        }
      },
      {
        title: '修改时间',
        key: 'update_time',
        dataIndex: 'update_time',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        }
      }
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'name',
        name: 'name',
        defaultValue: '',
        placeholder: '请输入试验项名进行搜索'
      }
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={12}>
            <Button
              type='primary'
              onClick={() => {
                this.props.history.push('/strategyLabs/add');
              }}
            >
              添加试验项
            </Button>
          </Col>
          <Col span={12}>
            {this.props.strategy_type && (
              <FilterTool
                ref='filterTool'
                data={data}
                colNum={1}
                query={this.freshQueryList}
                refreshFilter={this.refreshFilter}
                isOnChange={true}
                refresh={this.resetList}
                justify='end'
                columns={this.getColumns()}
                setColumn={this.setColumn}
                defaultColumns={this.state.defaultColumns}
              />
            )}
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            edit={this.edit}
            onChangePagination={this.onChangePagination}
            showDetail={this.showDetail}
            copy={this.copy}
            defaultColumns={this.state.defaultColumns}
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            rowKey='lab_id'
          />
        </div>
      </div>
    );
  }
}

export default LabsIndex;
